/*
 * @Author: huzhanglin 799490931@qq.com
 * @Date: 2023-12-16 21:09:52
 * @LastEditors: huzhanglin 799490931@qq.com
 * @LastEditTime: 2023-12-16 22:22:13
 * @FilePath: \my-app\src\app\pages\version-child\version-child.component.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import {
  Component,
  Input,
  OnChanges,
  SimpleChanges,
  EventEmitter,
  Output,
} from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
  selector: 'app-version-child',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h3>Version {{ major }}.{{ minor }}</h3>
    <h4>Change log:</h4>
    <!-- <ul>
      <li *ngFor="let change of changeLog">{{ change }}</li>
    </ul> -->
    <h4>{{ name }}</h4>
    <button type="button" (click)="vote()">
      子组件利用该属性 emits （发出）事件Agree
    </button>
  `,
  styleUrls: ['./version-child.component.css'],
})
export class VersionChildComponent implements OnChanges {
  @Input() name = '';
  @Output() voted = new EventEmitter<boolean>();

  didVote = true;

  vote() {
    console.log('发射事件给父组件 param =', this.didVote);
    this.voted.emit(this.didVote);
    if (this.didVote == true) {
      this.didVote = false;
    } else {
      this.didVote = true;
    }
  }

  @Input() major = 0;
  @Input() minor = 0;
  changeLog: string[] = [];

  ngOnChanges(changes: SimpleChanges) {
    console.log('值变化', changes);
    var log: string = '';
    for (const propName in changes) {
      const changedProp = changes[propName];
      const to = JSON.stringify(changedProp.currentValue);
      if (changedProp.isFirstChange()) {
        log = `Initial value of ${propName} set to ${to}`;
      } else {
        const from = JSON.stringify(changedProp.previousValue);
        log = `${propName} changed from ${from} to ${to}`;
      }
      console.log('log = ', log);
      console.log('size = ' + this.changeLog.length);
      this.changeLog.push(log);
    }
  }
}
